{% extends "base.html" %}

{% block content %}
<style>
/* 液态玻璃页面标题 */
.page-title {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}

.page-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.page-title h2 {
    color: #1C1C1E !important;
    text-shadow: 0 2px 4px rgba(0, 122, 255, 0.1);
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.5rem;
}

.page-title p {
    color: #666 !important;
    margin: 0.25rem 0 0 0;
    position: relative;
    z-index: 1;
    font-size: 0.9rem;
}

.page-title small {
    color: #888 !important;
    position: relative;
    z-index: 1;
    font-size: 0.8rem;
}

/* 液态玻璃卡片 */
.card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: var(--transition) !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem !important;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2) !important;
}

.card-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: #1C1C1E !important;
    font-weight: 600;
    position: relative;
    z-index: 1;
    padding: 1rem 1.5rem !important;
}

.card-body {
    position: relative;
    z-index: 1;
    color: #1C1C1E !important;
    padding: 1.5rem !important;
}

/* 液态玻璃表格 */
.table {
    background: transparent !important;
    color: #1C1C1E !important;
    margin-bottom: 0;
}

.table thead th {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-color: var(--glass-border) !important;
    color: #1C1C1E !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--glass-border) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.table thead th::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.table tbody td {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    transition: var(--transition) !important;
    position: relative;
    z-index: 1;
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transition: var(--transition) !important;
}

/* 液态玻璃徽章 */
.badge {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
}

.badge:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* 液态玻璃按钮 */
.btn {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: var(--transition) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.btn-primary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 1.5rem !important;
}

.btn-primary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    padding: 0.75rem 1.5rem !important;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-outline-primary {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
    padding: 0.5rem 1rem !important;
}

.btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-outline-info {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
    padding: 0.5rem 1rem !important;
}

.btn-outline-info:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

/* 液态玻璃模态框 */
.modal-content {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--glass-shadow) !important;
}

.modal-header {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: #1C1C1E !important;
}

.modal-body {
    color: #1C1C1E !important;
}

.modal-footer {
    background: rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid var(--glass-border) !important;
}

/* 液态玻璃表单控件 */
.form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    color: #1C1C1E !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 0 0 0.2rem rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px);
    color: #1C1C1E !important;
}

.form-control::placeholder {
    color: rgba(28, 28, 30, 0.6) !important;
}

/* 表单标签 */
.form-label {
    color: #1C1C1E !important;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 122, 255, 0.1);
}

/* 液态玻璃空状态 */
.text-center.py-4 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--glass-border);
    margin: 1rem 0;
}

/* 说明文本样式 */
.info-text {
    color: #1C1C1E !important;
    font-weight: 500 !important;
}

.info-text strong {
    color: #1C1C1E !important;
    font-weight: 600 !important;
}

.info-text h6 {
    color: #1C1C1E !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
}

.info-text ul {
    color: rgba(28, 28, 30, 0.7) !important;
}

.info-text li {
    margin-bottom: 0.5rem !important;
}

/* 文件图标样式 */
.file-icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

/* 暗色模式适配 */
[data-theme="dark"] .page-title {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .page-title::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .page-title h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .page-title p {
    color: #bdc3c7 !important;
}

[data-theme="dark"] .page-title small {
    color: #95a5a6 !important;
}

[data-theme="dark"] .card {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .card-header {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .card-body {
    color: #ffffff !important;
}

[data-theme="dark"] .table {
    color: #ffffff !important;
}

[data-theme="dark"] .table thead th {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table thead th::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .table tbody td {
    color: #ffffff !important;
}

[data-theme="dark"] .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .btn-primary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-primary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-info {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-info:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal-content {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .modal-header {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .modal-body {
    color: #ffffff !important;
}

[data-theme="dark"] .modal-footer {
    background: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .form-control {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .form-control:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .form-label {
    color: #ffffff !important;
}

[data-theme="dark"] .text-center.py-4 {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .info-text {
    color: #ffffff !important;
}

[data-theme="dark"] .info-text strong {
    color: #ffffff !important;
}

[data-theme="dark"] .info-text h6 {
    color: #ffffff !important;
}

[data-theme="dark"] .info-text ul {
    color: rgba(255, 255, 255, 0.7) !important;
}
</style>

<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="page-title">
        <div class="d-flex justify-content-between align-items-center">
        <div>
            <h2><i class="fas fa-folder-open me-2"></i>文件夹内容</h2>
                <p class="mb-0">文件夹: <strong>{{ folder_name }}</strong></p>
                <small>路径: {{ folder_path }}</small>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ url_for('extended_scripts') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回列表
            </a>
            <a href="{{ url_for('upload_custom_script') }}" class="btn btn-primary">
                <i class="fas fa-upload me-1"></i>上传脚本
            </a>
            </div>
        </div>
    </div>

    <!-- 文件列表卡片 -->
    <div class="card">
        <div class="card-header">
            <h6 class="m-0 font-weight-bold">
                <i class="fas fa-file me-2"></i>文件列表
                <span class="badge bg-secondary ms-2">
                    <i class="fas fa-hashtag me-1"></i>{{ files|length }} 个文件
                </span>
            </h6>
        </div>
        <div class="card-body">
            {% if files %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th><i class="fas fa-file me-1"></i>文件名</th>
                                <th><i class="fas fa-tag me-1"></i>类型</th>
                                <th><i class="fas fa-hdd me-1"></i>大小</th>
                                <th><i class="fas fa-calendar me-1"></i>修改时间</th>
                                <th><i class="fas fa-info-circle me-1"></i>状态</th>
                                <th><i class="fas fa-cogs me-1"></i>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for file in files %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        {% if file.is_script %}
                                            <i class="fab fa-python text-primary file-icon"></i>
                                        {% else %}
                                            <i class="fas fa-file text-muted file-icon"></i>
                                        {% endif %}
                                        <div>
                                            <strong>{{ file.name }}</strong>
                                            {% if file.is_script and file.is_registered %}
                                                <br>
                                                <small class="text-muted">{{ file.script_name }}</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    {% if file.is_script %}
                                        <span class="badge bg-primary">
                                            <i class="fab fa-python me-1"></i>Python脚本
                                        </span>
                                    {% else %}
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-file me-1"></i>其他文件
                                        </span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if file.size < 1024 %}
                                        {{ file.size }} B
                                    {% elif file.size < 1024 * 1024 %}
                                        {{ "%.1f"|format(file.size / 1024) }} KB
                                    {% else %}
                                        {{ "%.1f"|format(file.size / (1024 * 1024)) }} MB
                                    {% endif %}
                                </td>
                                <td>
                                    {{ file.modified_time.strftime('%Y-%m-%d %H:%M:%S') }}
                                </td>
                                <td>
                                    {% if file.is_script %}
                                        {% if file.is_registered %}
                                            <span class="badge bg-success">
                                                <i class="fas fa-check-circle me-1"></i>已注册
                                            </span>
                                        {% else %}
                                            <span class="badge bg-warning">
                                                <i class="fas fa-exclamation-triangle me-1"></i>未注册
                                            </span>
                                        {% endif %}
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        {% if file.is_script and file.is_registered %}
                                            <a href="{{ url_for('edit_custom_script', script_id=file.script_id) }}" 
                                               class="btn btn-sm btn-outline-primary"
                                               title="编辑脚本">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <form method="post" action="{{ url_for('delete_custom_script_view', script_id=file.script_id) }}" style="display:inline;" onsubmit="return confirm('确定要删除此脚本吗？此操作不可恢复！')">
                                                <input type="hidden" name="redirect_to" value="view_custom_folder">
                                                <input type="hidden" name="folder_path" value="{{ folder_path }}">
                                                <button type="submit" class="btn btn-sm btn-outline-danger" title="删除脚本">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        {% endif %}
                                        <button type="button" class="btn btn-sm btn-outline-info"
                                                onclick="viewFileContent('{{ file.name }}', '{{ file.path }}')"
                                                title="查看文件内容">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">文件夹为空</h5>
                    <p class="text-muted">此文件夹中还没有任何文件</p>
                    <a href="{{ url_for('upload_custom_script') }}" class="btn btn-primary">
                        <i class="fas fa-upload me-1"></i>上传第一个文件
                    </a>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- 文件描述信息卡片 -->
    {% if files %}
    <div class="card">
        <div class="card-header">
            <h6 class="m-0 font-weight-bold">
                <i class="fas fa-info-circle me-2"></i>说明
            </h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="info-text">
                        <h6><i class="fas fa-info-circle me-1"></i>文件状态说明</h6>
                        <ul>
                            <li><span class="badge bg-success"><i class="fas fa-check-circle me-1"></i>已注册</span> - 脚本已在系统中注册，可以创建定时任务</li>
                            <li><span class="badge bg-warning"><i class="fas fa-exclamation-triangle me-1"></i>未注册</span> - 脚本文件存在但未在系统中注册</li>
                    </ul>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="info-text">
                        <h6><i class="fas fa-cogs me-1"></i>操作说明</h6>
                        <ul>
                        <li><i class="fas fa-edit text-primary"></i> - 编辑已注册的脚本</li>
                        <li><i class="fas fa-trash text-danger"></i> - 删除已注册的脚本</li>
                        <li><i class="fas fa-eye text-info"></i> - 查看文件内容</li>
                        <li>未注册的脚本需要先上传到系统才能使用</li>
                    </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- 查看文件内容模态框 -->
<div class="modal fade" id="viewFileModal" tabindex="-1" aria-labelledby="viewFileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewFileModalLabel">
                    <i class="fas fa-file-code me-2"></i>查看文件内容
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <strong><i class="fas fa-file me-1"></i>文件名:</strong> <span id="fileName"></span>
                </div>
                <div class="mb-3">
                    <strong><i class="fas fa-folder me-1"></i>文件路径:</strong> <span id="filePath"></span>
                </div>
                <div class="mb-3">
                    <label for="fileContent" class="form-label">
                        <i class="fas fa-code me-1"></i>文件内容:
                    </label>
                    <textarea class="form-control" id="fileContent" rows="20" readonly 
                              style="font-family: 'Courier New', monospace; font-size: 12px;"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="copyToClipboard()">
                    <i class="fas fa-copy me-1"></i>复制内容
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// 查看文件内容
function viewFileContent(fileName, filePath) {
    document.getElementById('fileName').textContent = fileName;
    document.getElementById('filePath').textContent = filePath;
    document.getElementById('fileContent').value = '正在加载文件内容...';
    
    // 显示模态框
    const modal = new bootstrap.Modal(document.getElementById('viewFileModal'));
    modal.show();
    
    // 加载文件内容
    fetch(`/api/view_file_content?path=${encodeURIComponent(filePath)}`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.content !== undefined) {
                document.getElementById('fileContent').value = data.content;
            } else if (data.error) {
                document.getElementById('fileContent').value = `加载失败: ${data.error}`;
            } else {
                document.getElementById('fileContent').value = '加载失败: 未知错误';
            }
        })
        .catch(error => {
            console.error('加载文件内容失败:', error);
            document.getElementById('fileContent').value = `加载失败: ${error.message}`;
        });
}

// 复制到剪贴板
function copyToClipboard() {
    const textarea = document.getElementById('fileContent');
    textarea.select();
    document.execCommand('copy');
    
    // 显示提示
    const button = event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-check me-1"></i>已复制';
    button.disabled = true;
    
    setTimeout(() => {
        button.innerHTML = originalText;
        button.disabled = false;
    }, 2000);
}
</script>

{% endblock %}